<template>
  <div class="shoplike">
    <ContentBox title="商品收藏" @left="back" :fixed="true" :ostyle="style" titlecolor="black">
      <template slot="oleft"><van-icon color="#000" name="arrow-left"/></template>
    </ContentBox>
    <notice :top="$remToPx('0.88')"></notice>
    <div class="liketcontent">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
      >
        <div class="like-container" v-for="(item,index) in likeList" :key="index" @click.stop="toShopHome(item.merchant_id)">
          <div class="shop_box">
            <div class="shop_header">
              <van-image
                width=".8rem"
                height=".8rem"
                fit="cover"
                :radius="$remToPx(0.08)"
                :src="item.merchant.logo"
              />
              <div class="shop_info">
                <p>{{item.merchant.name}}</p>
                <span>{{item.merchant.focus_user_count}}关注</span>
              </div>
              <div class="into_shop" @click.stop="cancelLike(item.id, index)">取消关注</div>
            </div>
            <div class="shop_product" v-if="item.merchant.product.length > 0">
              <div v-for="(it, index) in item.merchant.product" :key="index" @click.stop="toDetail(it.id)">
                <van-image width="2.18rem" height="2.18rem" radius="0.16rem" :src="it.image">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                  <template v-slot:error></template>
                </van-image>
                <div class="product_price">￥{{it.price}}</div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      style: {
        background: '#ffffff',
        color: '#000'
      },
      loading: false,
      finished: false,
      likeList: [],
      last_page: 100,
      page: 1
    }
  },
  methods: {
    back () {
      if (this.$store.state.pl === 'IOS') {
        window.iosCallHandler('popVC')
      } else if (this.$store.state.pl === 'H5') {
        this.$router.go(-1)
      } else if (this.$store.state.pl === 'ANDROID') {
        AndroidJsBridge.finish()
      }
    },
    onLoad () {
      if (this.page >= this.last_page) {
        this.loading = false
        this.finished = true
        return false
      }
      this.loading = true
      this.finished = false
      setTimeout(_ => {
        this.page++
        this.$axios.get('/api/user/merchant/index', {
          params: {
            page: this.page
          }
        }).then(res => {
          if (res.status === 200) {
            this.likeList = this.likeList.concat(res.data.data)
          }
          this.loading = false
          this.finished = true
        })
      })
    },
    cancelLike (id, index) {
      this.$axios.post('/api/user/merchant/batch_cancel_focus_merchant', {
        id: id
      }).then(res => {
        if (res.status === 200) {
          this.likeList.splice(index, 1)
          this.$dialog({ message: '已取消关注' })
        }
      })
    },
    getLikeList () {
      this.$axios.get('/api/user/merchant/index', {
        params: {
          page: this.page
        }
      }).then(res => {
        if (res.status === 200) {
          this.likeList = res.data.data
        }
      })
    },
    toShopHome (id) {
      this.$router.push(`/shophome/${id}`)
    },
    toDetail (id) {
      this.$router.push(`/productDetail/${id}`)
    }
  },
  created () {
    this.getLikeList()
  }
}
</script>

<style lang="scss">
.shoplike{
  background: #f0f0f0;
  height: calc(100%);
 .liketcontent{
    padding: 1.56rem .16rem .16rem;
   .like-container{
     display: flex;
     background: #ffffff;
     margin-bottom: .16rem;
     border-radius: .16rem;
     align-items: center;
      padding: .2rem .16rem .32rem .16rem;
     .shop_box{
       flex: 1;
       .shop_header{
         display: flex;
         align-items: center;
         .shop_info{
           display: flex;
           flex-direction: column;
           justify-content: space-between;
           flex: 1;
           margin-left: .16rem;
           &>p{
             color: #333333;
             font-size: .32rem;
             font-weight: 500;
           }
           &>span{
             color: #333333;
             font-size: .24rem;
           }
         }
         .into_shop{
           width: 1.42rem;
           height: .48rem;
           border-radius: .24rem;
           border: .02rem solid #FF2A1F;
           color: #FF2A1F;
           font-size: .2rem;
           display: flex;
           align-items: center;
           justify-content: center;
         }
       }
       .shop_product{
         display: flex;
         align-items: center;
         margin-top: .16rem;
         &>div{
           margin-right: .16rem;
           position: relative;
           .product_price{
             position: absolute;
             width: 1.12rem;
             height: .48rem;
             display: flex;
             align-items: center;
             justify-content: center;
             color: #ffffff;
             background: #1d1e1e;
             font-size: .2rem;
             left: 50%;
             transform: translateX(-50%);
             bottom: .32rem;
             border-radius: .24rem;
           }
         }
         &>div:last-child{
           margin-right: unset;
         }
       }
     }
   }
 }
  .likefooter {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    padding: 0 .32rem;
    height: .95rem;
    align-items: center;
    background: #ffffff;
    .delete {
      color: #ffffff;
      background: #ff2a1f;
      font-size: .32rem;
      width: 1.28rem;
      height: .64rem;
      border-radius: .32rem;
      line-height: .64rem;
      text-align: center;
    }
  }
}
</style>
